<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>

<script>
    const canvas = document.createElement("canvas");
    canvas.width = 600;
    canvas.height = 400;
    document.body.append(canvas);
    const context = canvas.getContext("2d");

    // 填充一个三角形
    // 1.绘制路径，形成一个图形
    context.beginPath();
    context.moveTo(100, 100);
    // 2.调用fill方法，进行填充
    context.lineTo(100, 200);
    context.lineTo(200, 200);
    // context.lineTo(100, 100); 

    context.fill(); // 填充的话会自动闭合，也就是说起始点和终点会连接起来
    // context.stroke();  // 这个其实就是两条线
    context.closePath();

    // 绘制一个圆
    context.beginPath();
    context.arc(300, 300, 50, Math.PI / 180 * 0, Math.PI / 180 * 360);
    context.fillStyle = 'green';
    context.fill();
    context.closePath();








</script>